<template>
	<view class="profile-container">
		<!-- 顶部背景区域 -->
		<view class="header-bg">
			<!-- 用户信息区域 -->
			<view class="user-info" @click="goToLogin">
				<view class="user-avatar">
					<u-avatar :src="userInfo.avatar" size="60" shape="circle"></u-avatar>
				</view>
				<view class="user-details">
					<view class="username">{{ userInfo.nickname }}</view>
					<view class="user-icons">
					<u-icon name="map-fill" size="18" color="#fff"></u-icon>
					<u-icon name="setting-fill" size="18" color="#fff"></u-icon>
				</view>
				</view>
			</view>
			
			<!-- 收藏和足迹 -->
			<view class="stats-row">
				<template v-for="(item, index) in statsItems" :key="index">
					<view class="stat-item" @click="item.method">
						<view class="stat-number">{{ userStats[item.key] }}</view>
						<view class="stat-label">
							<u-icon :name="item.icon" size="14" color="#fff"></u-icon>
							<text>{{ item.text }}</text>
						</view>
					</view>
					<view v-if="index < statsItems.length - 1" class="divider"></view>
				</template>
			</view>
		</view>
		
		<!-- 我的订单 -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<view class="view-all" @click="goToAllOrders">
					<text>查看更多</text>
					<u-icon name="arrow-right" size="12" color="#999"></u-icon>
				</view>
			</view>
			<view class="order-status-row">
				<view 
					class="order-status-item" 
					v-for="(item, index) in orderStatusItems" 
					:key="index"
					@click="goToOrders(item.status)"
				>
					<u-icon :name="item.icon" size="24" color="#ff6b35"></u-icon>
					<text class="status-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
		
		<!-- 积分和优惠券 -->
		<view class="points-section">
			<view class="points-row">
				<view 
					class="points-item" 
					v-for="(item, index) in pointsItems" 
					:key="index"
				>
					<view class="points-label">{{ item.label }}</view>
					<view class="points-value">{{ userStats[item.key] }}</view>
					<view class="points-icon">
						<u-icon :name="item.icon" size="20" :color="item.color"></u-icon>
					</view>
				</view>
			</view>
			<view class="cards-row">
				<view class="cards-label">{{ cardsItem.label }}</view>
				<view class="cards-value">{{ userStats[cardsItem.key] }}</view>
				<view class="cards-icon">
					<u-icon :name="cardsItem.icon" size="20" :color="cardsItem.color"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 菜单栏 -->
		<view class="menu-section">
			<view class="menu-title">菜单栏</view>
			<view class="menu-grid">
				<view class="menu-row" v-for="(row, rowIndex) in menuItems" :key="rowIndex">
					<view 
						class="menu-item" 
						v-for="(item, itemIndex) in row" 
						:key="itemIndex"
						@click="handleMenuClick(item.method)"
					>
						<u-icon v-if="item.icon" :name="item.icon" size="24" color="#666"></u-icon>
						<text v-if="item.text" class="menu-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
				avatar: '/static/avatar.svg',
				nickname: '未登录'
			},
			isLogin: false, // 登录状态
				userStats: {
					collections: 0,
					footprints: 0,
					history: 0,
					points: 0,
					coupons: 0,
					cards: 0
				},
				// 收藏和足迹配置
				statsItems: [
					{ icon: 'star-fill', text: '我的收藏', key: 'collections', method: 'goToCollection' },
					{ icon: 'clock', text: '我的足迹', key: 'footprints', method: 'goToFootprint' },
					{ icon: 'eye-fill', text: '浏览历史', key: 'history', method: 'goToHistory' }
				],
				// 积分和优惠券配置
				pointsItems: [
					{ label: '积分', key: 'points', icon: 'gift-fill', color: '#ff6b35' },
					{ label: '优惠券', key: 'coupons', icon: 'coupon-fill', color: '#ff6b35' }
				],
				// 卡券配置
				cardsItem: {
					label: '卡券',
					key: 'cards',
					icon: 'integral-fill',
					color: '#ffa726'
				},
				orderStatusItems: [
					{ icon: 'clock', text: '待付款', status: 'pending' },
					{ icon: 'list', text: '待发货', status: 'paid' },
					{ icon: 'car-fill', text: '待收货', status: 'shipped' },
					{ icon: 'checkmark-circle', text: '已完成', status: 'completed' },
					{ icon: 'reload', text: '售后', status: 'after-sale' }
				],
				menuItems: [
					[
						{ icon: 'star', text: '我的收藏', method: 'goToCollection' },
						{ icon: 'coupon', text: '我的优惠券', method: 'goToCoupons' },
						{ icon: 'integral', text: '我的卡券', method: 'goToCards' },
						{ icon: 'gift', text: '领券中心', method: 'goToCenter' }
					],
					[
						{ icon: 'map', text: '收货地址', method: 'goToAddress' },
						{ icon: 'phone', text: '绑定手机号', method: 'goToPhone' },
						{ icon: 'share', text: '分销中心', method: 'goToDistribution' },
						{ icon: 'grid', text: '分类', method: 'goToCategory' }
					],
					[
						{ icon: 'account', text: '个人资料', method: 'goToProfile' },
						{ icon: 'trash', text: '清除缓存', method: 'goToStore' },
						{ icon: 'kefu-ermai', text: '客服', method: 'goToService' },
						{ icon: '', text: '', method: '' } // 空白占位
					]
				]
			};
		},
		methods: {
			// 处理菜单项点击事件
			handleMenuClick(methodName) {
				if (methodName && this[methodName]) {
					this[methodName]();
				}
			},
			// 检查登录状态并跳转到个人详情页面
		goToLogin() {
			// 检查是否已登录（这里可以根据实际项目的登录状态判断逻辑进行调整）
			const token = uni.getStorageSync('token');
			const userInfo = uni.getStorageSync('userInfo');
			
			if (token && userInfo) {
				// 已登录，直接跳转到个人详情页面
				uni.navigateTo({
					url: '/src/pages/subPackages/profile/detail/detail'
				});
			} else {
				// 未登录，跳转到登录页面
				uni.navigateTo({
					url: '/src/pages/subPackages/profile/login/login'
				});
			}
		},
			// 跳转到收藏页面
			goToCollection() {
				uni.navigateTo({
					url: '/src/pages/collection/collection'
				});
			},
			// 跳转到足迹页面
			goToFootprint() {
				uni.navigateTo({
					url: '/src/pages/footprint/footprint'
				});
			},
			// 跳转到浏览历史页面
			goToHistory() {
				uni.navigateTo({
					url: '/src/pages/history/history'
				});
			},
			// 跳转到所有订单
			goToAllOrders() {
				uni.navigateTo({
					url: '/src/pages/subPackages/orders/orders'
				});
			},
			// 跳转到指定状态的订单
			goToOrders(status) {
				uni.navigateTo({
					url: `/src/pages/subPackages/orders/orders?status=${status}`
				});
			},
			// 跳转到优惠券页面
			goToCoupons() {
				uni.navigateTo({
					url: '/src/pages/coupons/coupons'
				});
			},
			// 跳转到卡券页面
			goToCards() {
				uni.navigateTo({
					url: '/src/pages/cards/cards'
				});
			},
			// 跳转到领券中心
			goToCenter() {
				uni.navigateTo({
					url: '/src/pages/coupon-center/coupon-center'
				});
			},
			// 跳转到收货地址
			goToAddress() {
				uni.navigateTo({
					url: '/src/pages/address/address'
				});
			},
			// 跳转到绑定手机号
			goToPhone() {
				uni.navigateTo({
					url: '/src/pages/bind-phone/bind-phone'
				});
			},
			// 跳转到分销中心
			goToDistribution() {
				uni.navigateTo({
					url: '/src/pages/distribution/distribution'
				});
			},
			// 跳转到分类
			goToCategory() {
				uni.switchTab({
					url: '/src/pages/category/category'
				});
			},
			// 跳转到个人资料
			goToProfile() {
				uni.navigateTo({
					url: '/src/pages/profile-edit/profile-edit'
				});
			},
			// 清除缓存
			goToStore() {
				uni.showModal({
					title: '提示',
					content: '确定要清除缓存吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除缓存逻辑
							uni.showToast({
								title: '缓存已清除',
								icon: 'success'
							});
						}
					}
				});
			},
			// 联系客服
			goToService() {
				uni.showModal({
					title: '客服',
					content: '请联系客服电话：400-123-4567'
				});
			},
			
			// 检查登录状态
			checkLoginStatus() {
				const token = uni.getStorageSync('token');
				const storedUserInfo = uni.getStorageSync('userInfo');
				
				if (token && storedUserInfo) {
					// 已登录，更新用户信息
					this.isLogin = true;
					this.userInfo = {
						avatar: storedUserInfo.avatar || '/static/avatar.svg',
						nickname: storedUserInfo.nickname || '用户'
					};
				} else {
					// 未登录，重置用户信息
					this.isLogin = false;
					this.userInfo = {
						avatar: '/static/avatar.svg',
						nickname: '未登录'
					};
				}
			}
		},
		onShow() {
			// 每次页面显示时检查登录状态
			this.checkLoginStatus();
		}
	};

</script>

<style lang="scss">
	.profile-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	// 顶部背景区域
	.header-bg {
		background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
		padding: 20px;
		padding-top: 60px;
		color: white;
	}
	
	// 用户信息区域
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 30px;
		cursor: pointer;
		transition: all 0.3s ease;
		border-radius: 10px;
		padding: 10px;
		
		&:hover {
			background-color: rgba(255, 255, 255, 0.1);
			transform: translateY(-2px);
		}
		
		&:active {
			transform: translateY(0);
			background-color: rgba(255, 255, 255, 0.2);
		}
		
		.user-avatar {
			margin-right: 15px;
		}
		
		.user-details {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.username {
				font-size: 18px;
				font-weight: bold;
			}
			
			.user-icons {
				display: flex;
				align-items: center;
				gap: 20px;
			}
		}
	}
	
	// 统计数据行
	.stats-row {
		display: flex;
		align-items: center;
		justify-content: center;
		
		.stat-item {
			flex: 1;
			text-align: center;
			
			.stat-number {
				font-size: 24px;
				font-weight: bold;
				margin-bottom: 5px;
			}
			
			.stat-label {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				
				text {
					margin-left: 4px;
				}
			}
		}
		
		.divider {
			width: 1px;
			height: 30px;
			background-color: rgba(255, 255, 255, 0.3);
		}
	}
	
	// 我的订单区域
	.order-section {
		background-color: white;
		margin: 10px;
		border-radius: 10px;
		padding: 15px;
		
		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			
			.section-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}
			
			.view-all {
				display: flex;
				align-items: center;
				color: #999;
				font-size: 12px;
				
				text {
					margin-right: 4px;
				}
			}
		}
		
		.order-status-row {
			display: flex;
			justify-content: space-between;
			
			.order-status-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.status-text {
					font-size: 12px;
					color: #666;
					margin-top: 5px;
				}
			}
		}
	}
	
	// 积分区域
	.points-section {
		background-color: white;
		margin: 10px;
		border-radius: 10px;
		padding: 15px;
		
		.points-row {
			display: flex;
			margin-bottom: 15px;
			
			.points-item {
				flex: 1;
				display: flex;
				align-items: center;
				position: relative;
				
				.points-label {
					font-size: 14px;
					color: #666;
				}
				
				.points-value {
					font-size: 18px;
					font-weight: bold;
					color: #333;
					margin-left: 10px;
				}
				
				.points-icon {
					position: absolute;
					right: 10px;
				}
			}
		}
		
		.cards-row {
			display: flex;
			align-items: center;
			position: relative;
			
			.cards-label {
				font-size: 14px;
				color: #666;
			}
			
			.cards-value {
				font-size: 18px;
				font-weight: bold;
				color: #333;
				margin-left: 10px;
			}
			
			.cards-icon {
				position: absolute;
				right: 10px;
			}
		}
	}
	
	// 菜单区域
	.menu-section {
		background-color: white;
		margin: 10px;
		border-radius: 10px;
		padding: 15px;
		
		.menu-title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 15px;
		}
		
		.menu-grid {
			.menu-row {
				display: flex;
				margin-bottom: 20px;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.menu-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.menu-text {
						font-size: 12px;
						color: #666;
						margin-top: 5px;
					}
				}
			}
		}
	}
</style>
